<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>智能体交互</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="../static/css/base.css" />
  <link rel="stylesheet" href="../static/css/agent.css" />
  <link rel="icon" href="../static/favicon.ico" />
  <!-- PWA配置文件 -->
  <link rel="manifest" href="../static/manifest.json" />
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/socket.io/4.4.1/socket.io.min.js"></script>
  <script src="https://kit.fontawesome.com/11023f265d.js" crossorigin="anonymous"></script>
</head>

<body>
  <!-- 顶栏 -->
  <div id="topbar" role="banner" aria-label="智能体名称">
    <button id="delete-chat-history" aria-label="删除对话记录"></button>
    <span id="agent-name">智能体名称</span>
    <button id="audio-control" aria-label="静音开关"></button>
  </div>
  <div id="main_page" role="main">

    <!-- 聊天消息显示区域 -->
    <div id="chat-container" aria-live="polite" aria-atomic="true"></div>
    <!-- 下部功能区 -->
    <div id="chat-input-container" role="form">

      

      <div id="imageUploadPanel" style="display: none;">
        <div class="content" aria-label="图片列表">
          <div class="imageList" id="imageList">
            <!-- 图片列表在这里 -->
          </div>
          <div class="add" aria-label="添加图片" style="display: none;" id="addImg">
            <img src="../static/images/more_function_start.png" alt="添加图片" aria-hidden="true">
            <input id="photo" type="file" accept="image/*" capture="camera" style="display: none;"/>
          </div>
        </div>
      </div>
      <button id="phone-button" aria-label="语音聊天">
        <img src="../static/images/phone.png" id="phone_icon" alt="语音聊天" />
      </button>
      <button id="camera-button" aria-label="使用相机上传图片">
        <img src="../static/images/camera.png" id="camera_icon" alt="使用相机上传图片" />
      </button>
      
      <!-- 语音输入按钮 -->
      <button id="microphone-button" aria-label="开始语音输入"></button>
      <textarea id="agent-chat-textarea" placeholder="输入消息..." aria-label="输入消息"></textarea>
      <button id="send-button" aria-label="发送消息">发送</button>
      <button id="more_function_button" aria-label="开启更多功能"></button>
    </div>
    <div id="more_function_board" role="region" aria-labelledby="more_function_label" style="display:none">
      <div id="album_photo" aria-label="添加图片"><i class="fa-solid fa-image"></i></div>
      <div id="camera_photo" aria-label="使用相机上传图片"><i class="fa-solid fa-camera"></i></div>
    </div>
    <div id="navbar" role="navigation">
      <a href="/agent" aria-label="首页">
        <span>首页</span>
      </a>
      <a href="/chat" aria-label="消息">
        <span>消息</span>
      </a>
      <a href="/album" aria-label="有声相册">
        <span>相册</span>
      </a>
      <a href="/skills" aria-label="能力">
        <span>能力</span>
      </a>
      <a href="/mine" aria-label="我的">
        <span>我的</span>
      </a>
    </div>
  </div>

  <!-- 音频播放标签 -->
  <audio id="audioPlayer" controls autoplay style="display: none" aria-label="音频播放器"></audio>
  <script src="../static/js/auth.js"></script>
  <script src="../static/js/chat.js"></script>
  <script src="../static/js/lib/recorder.js"></script>
  <script type="module" src="../static/js/lib/audioUtils.js"></script>
  <script type="module" src="../static/js/agent.js"></script>
</body>

</html>